<template>
    <section id="monitor-restful">
        <el-row>
            <el-col :span="8">
    <el-table
            ref="restTable"
            :data="restData"
            style="width: 100%"
            border
            highlight-current-row
            @current-change="viewRestFulStatus"
    >
        <el-table-column
                prop="url"
                label="接口名称"

        fit
        >
        </el-table-column>
        <el-table-column
                prop="responseCode"
                label="状态码"
                width="100"
                :filters="[{ text: '200', value: '200' }, { text: '502', value: '502' }, { text: '500', value: '500' }, { text: '408', value: '408' }]"
                :filter-method="filterCode"
                filter-placement="bottom-end">
            <template slot-scope="scope">
                <el-tag
                        size="mini"
                        :type="scope.row.responseCode !== '200' ? 'warning' : 'success'"
                        disable-transitions>{{scope.row.responseCode}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
                prop="responseTime"
                label="响应时间"
                :formatter="formatter"
                width="100"
        >
        </el-table-column>


    </el-table>
            </el-col>

            <el-col :span="10">
                <div class="block">
                    <el-timeline>
                        <el-timeline-item timestamp="当前状态" placement="top" icon="el-icon-monitor" type="primary" size="large">
                            <el-card class="bg-card">
                                <el-row>
                                    <el-col :span="2">名称:</el-col>
                                    <el-col :span="10">
                                        <el-tag type="success" size="mini">{{this.restStatus.url}}</el-tag>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="2">状态:</el-col>
                                    <el-tag type="warning" size="mini">{{this.restStatus.code}}</el-tag>
                                </el-row>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item timestamp="接口响应码分布" placement="top" icon="el-icon-picture-outline" type="primary" size="large">
                            <el-card class="bg-card">
                                <div id="rest-response-codes" style="width:100%; height:200px;"></div>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item timestamp="接口平均响应时间" placement="top" icon="el-icon-picture-outline" type="primary" size="large">
                            <el-card class="bg-card">

                                    <div id="rest-response-trend" style="width:100%; height:250px;"></div>

                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </el-col>

        </el-row>
    </section>
</template>

<script>
    import echarts from 'echarts'
    import { monitorRestData,monitorRestDistributionData } from '../../api/api'
    export default {
        data() {
            return {
                restData: [{
                    url:"",
                    responseCode:"",
                    responseTime:null
                }],
                restStatus : {
                    url: "aa",
                    code: "200",
                    data: [],
                    codelegend: [],

                    T:[],
                    responseTime:[],
                },
                restPie: null,
                restLine: null,

            }
        },
        methods: {
            resetDateFilter() {
                this.$refs.restTable.clearFilter('date');
            },
            clearFilter() {
                this.$refs.restTable.clearFilter();
            },
            setCurrent(row) {
                this.$refs.restTable.setCurrentRow(row);
            },
            formatter(row, column) {
                return row.responseTime;
            },
            filterCode(value, row) {
                return row.responseCode === value;
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            viewRestFulStatus(val){
                console.log("this val " , val)
                this.restStatus.url = val.url
                if (val.responseCode === "200") {
                    this.restStatus.code = "正常"
                }else {
                    this.restStatus.code = "异常"
                }
                let param = {url:val.url}

                monitorRestDistributionData(param).then((res) => {
                    console.log(res)
                    // this.restData = res.status
                    this.restStatus.data = res.distribution
                    this.restStatus.codelegend = res.codelegend

                    this.restStatus.T  = res.trend.T
                    this.restStatus.responseTime  = res.trend.X1

                    this.drawPieChart()
                    this.drawLineChart()

                })




            },

            getMonitorInterfaceData(){
                let self = this
                monitorRestData().then((res) => {
                    console.log(res)
                    this.restData = res.status
                    this.setCurrent(this.restData[0])    //默认选中第一行
                })

            },

            drawPieChart() {
                let self = this
                this.restPie = echarts.init(document.getElementById('rest-response-codes'));
                this.restPie.setOption({

                    title: {
                        text: '接口状态码分布',
                        subtext: '1小时内',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        // data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                        data: self.restStatus.codelegend
                    },
                    series: [
                        {
                            name: '接口响应分布',
                            type: 'pie',
                            radius: ['30%','50%'],
                            center: ['50%', '60%'],
                            // data: [
                            //     { value: 335, name: '直接访问' },
                            //     { value: 310, name: '邮件营销' },
                            //     { value: 234, name: '联盟广告' },
                            //     { value: 135, name: '视频广告' },
                            //     { value: 1548, name: '搜索引擎' }
                            // ],
                            data: self.restStatus.data,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            },
            drawLineChart() {
                let self = this
                this.restLine = echarts.init(document.getElementById('rest-response-trend'));
                this.restLine.setOption({
                    title: {
                        text: '接口(200)响应趋势',
                        subtext: '1小时内',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },

                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: self.restStatus.T
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '邮件营销',
                            type: 'line',
                            stack: '总量',
                            data: self.restStatus.responseTime
                        }
                    ]
                });
            },

        },
        mounted: function () {
            console.log("debug ehrer")
            this.getMonitorInterfaceData()

        }
    }
</script>

<style>
    #monitor-restful .bg-card {
        background-color: #FAFAFA;
    }
</style>